<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>
</head>
<body>
    <input type="text" v-model="title" />
    <input type="text" v-model="title" />
    <div v-bind="title"></div>
</body>
</html>
<script>
function View(){
    //设置代理拦截
    let proxy = new Proxy({},{
        get(obj,property){

        },
        set(obj,property,value){
            console.log(value)
            obj[property] = value;
            let v_lis = document.querySelectorAll(`[v-model="${property}"],[v-bind="${property}"]`);
            v_lis.forEach(el => {
                el.innerHTML = value;
                el.value = value;
            });
        }
    });

    //初始化绑定元素事件
    this.run = function(){
        const els = document.querySelectorAll("[v-model]");
        els.forEach(item => {
            item.addEventListener("keyup",function(){
                proxy[this.getAttribute("v-model")] = this.value;
            })
        });
    }
}
let view = new View().run();
</script>